<template>
  <div class="user-favorite">
    <h1 class="title">喜欢的商品</h1>
    <el-empty
      v-if="$store.state.favoriteItems.length == 0"
      :image-size="200"
      description="您暂未收藏任何商品。"
    ></el-empty>
    <div class="favorite-list" v-if="$store.state.favoriteItems.length > 0">
      <el-card
        shadow="hover"
        class="favorite-list-item"
        v-for="item in favoriteItem"
        :key="item.id"
      >
        <router-link
          :to="{ path: '/item', query: { id: item.itemId } }"
          class="favorite-list-item-left"
        >
          <img
            class="favorite-list-item-img"
            :src="item.itemSwiperImgUrl[0].url"
          />
          <div class="favorite-list-item-detail">
            <p class="favorite-list-item-title">{{ item.title }}</p>
            <p class="favorite-list-item-price">
              <span class="favorite-list-item-price-rmb">￥</span
              >{{ item.discountPrice }}
            </p>
          </div>
        </router-link>
        <div class="favorite-list-item-right">
          <el-button
            type="danger"
            class="favorite-delete el-icon-delete"
            circle
            @click="deleteFavoriteItems(item.itemId)"
          >
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserFavorite",
  data() {
    return {
      url: require("@/assets/img/item/item1/img1.png"),
      favoriteItem: [],
    };
  },
  created() {
    if (this.$store.state.favoriteItems.length != 0) {
      this.favoriteItem = this.$store.state.favoriteItems.filter(function (n) {
        return n.isFavorite == true;
      });
    }
  },
  methods: {
    deleteFavoriteItems(itemId) {
      // 执行删除操作弹出确认框
      this.$confirm("确认取消收藏所选商品吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 确认后进行的操作
          this.$store.commit("deleteFavoriteItems", itemId);
          this.favoriteItem = this.$store.state.favoriteItems.filter(
            (n) => n.isFavorite == true
          );
        })
        .catch(() => {
          // 取消后进行的操作
        });
    },
  },
};
</script>

<style scoped>
.user-favorite {
  padding: 20px;
  position: relative;
}
.user-favorite .title {
  font-size: 30px;
  font-weight: 400;
  line-height: 68px;
  color: #757575;
}

.favorite-list-item {
  margin-bottom: 10px;
}
.favorite-list-item /deep/ .el-card__body {
  display: flex;
}

.favorite-list-item-left {
  flex: 10;
  display: flex;
}
.favorite-list-item-img {
  width: 80px;
  height: 80px;
}
.favorite-list-item-detail {
  margin-left: 20px;
  padding: 14px;
}
.favorite-list-item-title {
  padding: 3px 0;
  font-size: 18px;
  font-weight: 500;
  color: #212121;
  line-height: 18px;
}
.favorite-list-item-price {
  margin-top: 10px;
  font-size: 16px;
  color: #d33a31;
}

.favorite-list-item-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.favorite-delete {
  display: none;
}
.favorite-list-item:hover .favorite-delete {
  display: inline-block;
}
</style>